<template>
  <div class="assetInfo">
    <tab
      :ellipsis="false"
      class="assetInfo-tab"
      :config="data.tabConfig"
      v-model="data.tabActive"
      @change="init"
    >
    </tab>
    <sum :config="data.sumConfig" :formData="data.sunFormData"></sum>
    <div class="assetInfo-map">
      <tMap
        ref="tMapEl"
        :showLegends="true"
        :config="data.mapConfig"
      ></tMap>
    </div>
    <div class="assetInfo-assetCenter">
      <van-button round type="success">资产中心</van-button>
      <div class="assetInfo-assetCenter--content">
        <sum 
          :formData="data.centerSumForm"
          :config="data.assetCenterSumConfig"
        ></sum>
        <projectInfo
          :formData="data.centerSumForm"
          :config="data.projectInfoConfig"
        ></projectInfo>
      </div>
    </div>
    <div class="assetInfo-coreAsset">
      <van-button round type="success">核心资产分布情况</van-button>
      <div class="assetInfo-coreAsset--content">
        <sum 
          :formData="data.centerSumForm"
          :config="data.coreAssetCenterSumConfig"
        ></sum>
      </div>
    </div>
    <div class="assetInfo-proportion">
      <van-button round type="success">业态分布占比</van-button>
      <div class="assetInfo-proportion--content">
        <pie
          ref="pieEl"
          :config="data.pieConfig"
        ></pie>
      </div>
      
    </div>
  </div>
</template>
<script setup lang="ts">
import tMap from "@/components/map/index.vue";
import { config } from './config'
import { computed, onActivated, reactive, ref } from 'vue'
import { AssetInfoApi } from "@/api/assetInfo.ts";
import { parseTime } from "@/utils";
import baseStore from "@/store";
const pieEl = ref()
const store = baseStore()
const tMapEl = ref()
let data = reactive<{
  [key:string]: any
}>({
  tabActive: 0,
  tabConfig: store.baseCompany,
  sunFormData: {},
  sumConfig: [],
  mapConfig: {
    legendList: [...store.baseCompany].splice(1)
  },
  centerSumForm: {},
  assetCenterSumConfig: [],
  coreAssetCenterSumConfig: [],
  projectInfoConfig: [],
  pieConfig:{
    options: {}
  }
})
let queryForm = reactive({
  queryTime: parseTime(Date(),'{y}-{m}'),
  companyIdList: computed(() => String(store.baseCompany[data.tabActive]?.id).split(',')) 
})
config(data)
function init(){
  Promise.all([
    AssetInfoApi.queryPositionData(queryForm),
    AssetInfoApi.queryData({
      companyIdList: queryForm.companyIdList
    }),
    AssetInfoApi.ratio(),
  ]).then(res => {
    res.forEach((val:any, index) => {
      switch (index) {
        case 0:
          let markerList: marker [] = [...val.landList,...val.operatingFixedList,...val.underWayList].map(item => ({
            id: item.code,
            styleId: item.groupCompanyId,
            content: '',
            position: new TMap.LatLng(item.latitude,item.longitude),
            properties: {
              title: 'marker'
            }
          }))
          setMarker(markerList)
          break;
      
        case 1:
          data.centerSumForm = val
          break;
        
        case 2:
          let colors = ['#70FFF9','#70BFFF','#587DFF','#7ED321','#F18723','#FA493F','#F58723','#FFC9A0','#B5CDF1','#ADB4C7'];
          let layoutData = val.find((item: { id: string; }) => queryForm.companyIdList.length > 1 ? !item.id : queryForm.companyIdList.includes(String(item.id))).layoutData
          pieEl.value.init(layoutData.map((item: { area: number; layoutName: string}, index: number) => ({
            value: (item.area / 10000).toFixed(2), 
            name: item.layoutName,
            itemStyle:{color: colors[index]},
            label:{color: colors[index]}
          })))
          break;
        default:
          break;
      }
    })
  })
}
onActivated(() => {
  data.tabActive = 0
  init()
})


function queryHeaderData(){
  AssetInfoApi.queryHeaderData(queryForm).then((res: any) => {
    data.sunFormData = res
  })
}
queryHeaderData()

function setMarker(geometries: marker[]) {
  let styles: any = {}
  data.mapConfig.legendList.forEach((item: company) => {
    styles[item.id + ''] = new TMap.MarkerStyle({
      width: 25,
      height: 25,
      anchor: { x: 16, y: 32 },
      src:'/ys-amp-web/bi/map/project/icon?color=' + item.color?.slice(1)
    })
  })
  tMapEl.value.setMarker(geometries,styles)
}

</script>
<style lang="scss">
.assetInfo{
  &-tab{
    margin-bottom: 1.4rem;
    // margin-left: -var(--van-padding-sm);
  }
  &-map{
    & .TMap{
      height: 38rem;
      margin-top: 3rem;
      border: 0.1rem solid $spare16;
    }
  }

  &-assetCenter, &-coreAsset, &-proportion{
    margin-top: 2.5rem;

    &--content{
      padding: 1.5rem 0.9rem;
    }
  }

  &-coreAsset{
    &--content{
      padding-bottom: 0;
    }
  }
}
</style>